<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试CSS-Cascading Style Sheets 的选择器</title>
		<style type="text/css">
			/* 写法  */
			/* 语法：选择器{属性名：属性值；} */
			div {
				/* 给所有div设置 */
				/* 背景色
				 字体颜色
				 字号
				 字体*/
				background-color: red;
				color: green;
				font-size: 30px;
				font-family: "黑体";

			}

			input {
				background-color: antiquewhite;
				padding: 5px;
				font-size: 30px;
				font-family: "幼圆";
			}

			.d {
				/* class选择器-. */
				background-color: yellow;
			}

			#dd,#ee {
				/* id选择器-# */
				font-size: 50px;
				background-color: orange
			}

			input[type="text"] {
				/* 属性选择器-标签名[type="属性值"] */
				color: #008000;
			}
		</style>
	</head>
	<body>

		<!-- 用div标签 -->
		<!-- css写法1：行内css -->
		<div>为什么啊为什么要让我看到这么帅的人我怕我以后看不到怎么办</div>
		<div style="background-color: orangered;">用style设置DIV</div>
		<div align="center">不用style的行内css</div>
		<!-- 选择器：
		标签名-标签名获取
		id-# 先设置id属性+通过#获取id的值
		class-.设置class属性 + 通过.获取class的值
		分组-，隔开
		属性-标签名[type=...]-->
		<div id="dd">id原则上不相同1 id选择器设置的div-#</div>
		<div id="ee">id原则上不相同2 id选择器设置的div-#</div>
		<div class="d">第一个 class选择器设置-.</div>
		<div class="d">第二个 class选择器设置-.</div>

		<span>我是span1</span>
		<span>我是span2</span>
		<p>我是p1</p>
		<p>我是p2</p>
		<p>我是p3</p>
		<input type="text" placeholder="我是input1" /><br />
		<input type="text" placeholder="我是input2" />
		
		


		</div>
	</body>
</html>
